<template>
  <div class="layout">
    <div>
      <BackNav left-text="返回" left-arrow title="我的订单"></BackNav>
    </div>
    <div class="top"></div>
    <div class="main">
      <div class="wrapper">
        <div class="wrapper-top">
          <van-tabs v-model="active" sticky animated swipeable>
            <van-tab title="全部" @click="findOrderStatus">
              <div v-for="(item, index) in shoped" :key="index">
                <!-- 已完成 -->
                <div class="order">
                  <div class="order-top"></div>
                  <div class="order-item">
                    <div class="order-item-top">
                      <div class="order-id">{{ item.oid }}</div>
                      <div class="order-right">
                        <div class="com">已完成</div>
                        <div class="icon">
                          <van-icon
                            name="delete-o"
                            @click="remove(item.oid)"
                            size="16"
                            class="icon-m"
                          />
                        </div>
                      </div>
                    </div>
                    <div
                      class="order-item-main"
                      v-for="(item, index) in item.shoparr"
                      :key="index"
                    >
                      <van-card
                        :num="item.count"
                        :price="item.price"
                        :desc="item.enname"
                        :title="item.name"
                        :thumb="item.smallImg"
                      />
                    </div>
                  </div>
                </div>
                <div class="total">
                  <div class="time">{{item.createdAt}}</div>
                  <div class="bottom">
                    <div class="bottom-tot">
                      共计
                      <span>{{ item.count }}</span>
                      件
                    </div>
                    <div class="he">
                      合计<span>&yen;{{ item.price }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 确认收货 -->
              <div class="order">
                <div class="order-top"></div>
                <div
                  class="order-item last"
                  v-for="(item, index) in shoping"
                  :key="index"
                >
                  <div class="order-item-top">
                    <div class="order-id">{{ item.oid }}</div>
                    <div class="order-right">
                      <div class="com" @click="sure(item.oid)">确认收货</div>
                    </div>
                  </div>
                  <div
                    class="order-item-main"
                    v-for="(v, i) in item.shoparr"
                    :key="i"
                  >
                    <van-card
                      :num="v.count"
                      :price="v.price"
                      :desc="v.enname"
                      :title="v.name"
                      :thumb="v.smallImg"
                    />
                  </div>
                   <div class="total">
                      <div class="time">{{item.createdAt}}</div>
                      <div class="bottom">
                        <div class="bottom-tot">
                          共计
                          <span>{{ item.count }}</span>
                          件
                        </div>
                        <div class="he">
                          合计<span>&yen;{{ item.price }}</span>
                        </div>
                      </div>
                    </div>
                </div>
              </div>
            </van-tab>
            <van-tab title="进行中">
              <div v-for="(item, index) in shoping" :key="index">
                <div class="order">
                  <div class="order-top"></div>
                  <div class="order-item">
                    <div class="order-item-top">
                      <div class="order-id">{{ item.oid }}</div>
                      <div class="order-right">
                        <div class="com">确认收货</div>
                      </div>
                    </div>
                    <div
                      class="order-item-main"
                      v-for="(i, v) in item.shoparr"
                      :key="v"
                    >
                      <van-card
                        :num="i.count"
                        :price="i.price"
                        :desc="i.enname"
                        :title="i.name"
                        :thumb="i.smallImg"
                      />
                    </div>
                  </div>
                </div>
                <div class="total">
                  <div class="time">{{item.createdAt}}</div>
                  <div class="bottom">
                    <div class="bottom-tot">
                      共计
                      <span>{{ item.count }}</span>
                      件
                    </div>
                    <div class="he">
                      合计<span>&yen;{{ item.price }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
            <van-tab title="已完成">
              <div v-for="(item, index) in shoped" :key="index">
                <div class="order">
                  <div class="order-top"></div>
                  <div class="order-item">
                    <div class="order-item-top">
                      <div class="order-id">{{ item.oid }}</div>
                      <div class="order-right">
                        <div class="com">已完成</div>
                        <div class="icon">
                          <van-icon name="delete-o" size="16" class="icon-m" />
                        </div>
                      </div>
                    </div>
                    <div
                      class="order-item-main"
                      v-for="(a, b) in item.shoparr"
                      :key="b"
                    >
                      <van-card
                        :num="a.count"
                        :price="a.price"
                        :desc="a.enname"
                        :title="a.name"
                        :thumb="a.smallImg"
                      />
                    </div>
                  </div>
                </div>
                <div class="total">
                  <div class="time">{{item.createdAt}}</div>
                  <div class="bottom">
                    <div class="bottom-tot">
                      共计
                      <span>{{ item.count }}</span>
                      件
                    </div>
                    <div class="he">
                      合计<span>&yen;{{ item.price }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BackNav from "../components/BackNav";
export default {
  components: {
    BackNav,
  },
  data() {
    return {
      active: 0,
      shoping: [],
      shoped: [],
      allshop: [],
    };
  },
  created() {
    this.findOrderStatus();
  },
  methods: {
    // 查询订单状态
    findOrderStatus() {
      this.axios({
        method: "get",
        url: "/findOrder",
        params: {
          status: this.active,
        },
      })
        .then((res) => {
          if (res.data.code == 70000) {
            this.$toast(res.data.msg);
            // 记录oid
            let newarr = [];
            // 记录处理后的数据
            let allshop = [];
            res.data.result.forEach((item) => {
              newarr.push(item.oid);
            });
            newarr = Array.from(new Set(newarr));
            for (let i = 0; i < newarr.length; i++) {
              let num = [];
              let total = 0;
              let count = 0;
              let id = {
                oid: newarr[i],
                shoparr: num,
                price: total,
                count,
              };
              for (let j = 0; j < res.data.result.length; j++) {
                if (newarr[i] === res.data.result[j].oid) {
                  num.push(res.data.result[j]);
                  total += res.data.result[j].price * res.data.result[j].count;
                  count += res.data.result[j].count;
                  id.price = total;
                  id.count = count;
                }
              }
              allshop.push(id);
            }
            if (allshop.length == 0) {
              this.shoped = [];
              this.shoping = [];
            }
            let a = [];
            let b = [];
            allshop.forEach((item) => {
              if (item.shoparr.length != 0) {
                if (item.shoparr[0].status == 1) {
                  let time = item.shoparr[0].createdAt;
                  time=item.shoparr[0].createdAt.replace('Z','+0000')
                  let d = new Date(time);
                  let times =
                    d.getFullYear() +
                    "-" +
                    (d.getMonth() + 1) +
                    "-" +
                    d.getDate() +
                    " " +
                    d.getHours() +
                    ":" +
                    d.getMinutes() +
                    ":" +
                    d.getSeconds();
                  item.createdAt=times
                  a.push(item);
                  this.shoping = a;
                } else {
                  let time = item.shoparr[0].createdAt;
                  time=item.shoparr[0].createdAt.replace('Z','+0000')
                  let d = new Date(time);
                  let times =
                    d.getFullYear() +
                    "-" +
                    (d.getMonth() + 1) +
                    "-" +
                    d.getDate() +
                    " " +
                    d.getHours() +
                    ":" +
                    d.getMinutes() +
                    ":" +
                    d.getSeconds();
                  item.createdAt=times
                  b.push(item);
                  this.shoping = a;
                  this.shoped = b;
                  
                }
              }
            });
          }
        })
        .catch((err) => {
          
        });
    },
    // 删除订单
    remove(oid) {
      this.axios({
        method: "post",
        url: "/removeOrder",
        data: {
          oid,
        },
      })
        .then((res) => {
          
          if (res.data.code == 90000) {
            this.findOrderStatus();
          }
        })
        .catch((err) => {
          
        });
    },
    // 确认收货
    sure(oid) {
      this.axios({
        method: "post",
        url: "/receive",
        data: {
          oid,
        },
      })
        .then((res) => {
          
          if (res.data.code == 80000) {
            this.$toast(res.data.msg);

            this.findOrderStatus();
          }
        })
        .catch((err) => {
          
        });
    },
  },
};
</script>
<style lang="less" scoped>
.top {
  height: 100px;
  background: #0c43ba;
}
.main {
  position: relative;
  top: -30px;
  width: 95%;
  height: 100px;
  margin: 0 auto;
  .wrapper {
    padding: 10px;
    .wrapper-top {
      margin-bottom: 10px;
      border-radius: 10px;
      overflow: hidden;
      .order {
        .order-top {
          height: 10px;
          background: #fff;
        }
        .order-item {
          background: #f0f0f0;
          border-radius: 10px;
          .order-item-top {
            padding: 10px 16px;
            display: flex;
            align-items: center;
            .order-id {
              font-size: 14px;
              color: #a17571;
            }
            .order-right {
              margin-left: auto;
              display: flex;
              .com {
                color: #666667;
              }
            }
          }
        }
      }
      .total {
        padding: 10px;
        background: #f0f0f0;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        line-height: 2;
        .time {
          color: #a7a4ab;
        }
        .bottom {
          display: flex;
          .bottom-tot {
            color: #a7a4ab;
            span {
              color: #726578;
            }
          }
          .he {
            margin-left: auto;
            color: #0c43ba;
            font-weight: bold;
            font-size: 14px;
          }
        }
      }
    }
  }
}
.last {
  margin-bottom: 10px;
}
.icon-m {
  vertical-align: middle;
  margin-left: 10px;
}
/deep/ .van-tabs__line {
  background: #0c43ba;
}
/deep/ .van-tab--active {
  color: #0c43ba;
}
/deep/ .van-card {
  background: #f0f0f0;
  border-radius: 10px;
  border-bottom: 1px dashed #f1f1f1;
}
/deep/ .van-card__price {
  color: #0c43ba;
  font-weight: bold;
  font-size: 14px;
}
/deep/ .van-card__title {
  line-height: 1.5;
  font-size: 16px;
}
/deep/ .van-card__content {
  min-height: 80px;
}
/deep/ .van-card__price-integer {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  font-size: 14px;
}
/deep/ .van-card__price-decimal {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>